<template>
	<div class="ssc-list">
		<div class="border-t-[1px] border-t-[#E4E4E4] border-solid px-[15px] " v-for="(item, i) in arrList" :key="i">
			<div
				class="text-[#888888] h-[44.5px] text-[14px] flex items-center justify-center  border-b-[1px] border-b-[#E4E4E4] border-solid ">
				{{ item.name }}
			</div>
			<div class="py-[15px]  flex flex-wrap gap-y-[15px]">
				<div class=" w-1/4 flex justify-between items-center " v-for="(jtem, j) in item.arr" :key="j">
					<div class="w-[40px] flex justify-center items-center">
						<template v-if="!isNaN(jtem.Key as any)">
							<sscBall :num="jtem.Key"></sscBall>
						</template>
						<template v-else>
							{{ jtem.Key }}
						</template>
					</div>
					<div
						class="flex-1 h-[22px] bg-[#FBFBFD] rounded-[5px] border-[1px] border-[#E4E4E4] border-solid flex items-center justify-center"
						:class="{
							active: jtem.Val > 0
						}">
						{{ jtem.Val }}
					</div>
				</div>
			</div>

		</div>
	</div>
</template>
<script setup lang="ts">
import sscBall from "@/components/ball/ssc-ball.vue";
const props = withDefaults(
	defineProps<{
		list: MonitorMoTableList;
	}>(),
	{}
);
watch(
	() => props.list,
	val => {
		arrList.value = val;
	}
);
const arrList = ref<MonitorMoTableList>([]);
</script>
<style lang="scss" scoped>
</style>
